<template>
	<view class="big-box flex-col align-center"
		:style="{background: 'url('+`/static/images/starmap/private_map_bg-${isSelectMap}.png`+')  no-repeat center center / cover',backgroundSize:'cover'}">
		<!-- background: url('/static/images/map/bg.png') #FFF no-repeat; -->
		<top-navigation :isBack="false">

		</top-navigation>
		<view class="top-crystal justify-between" v-if="isSelectMap!=3">
			<view class="crystal-box"
				:style="{background: 'url('+`/static/images/starmap/crystal-num-bg${isSelectMap}.png`+')  no-repeat center center / 100% 100%',backgroundSize:'100% 100%'}">
				<image class="my-crystal" :src="`/static/images/starmap/my_crystal${isSelectMap}.png`" mode=""></image>
				<!-- 地图1跳转我的钻石 -->
				<view class="my-num" v-if="isSelectMap==1" @tap="$navto('/pages/mine/myOre/myOre')">
					{{kuangInfo.crystal}}
				</view>
				<view class="my-num justify-start align-center" v-if="isSelectMap==2" @tap="selectTap">
					{{gather}}
					<image class="xiala" src="/static/images/starmap/xiala.svg" mode="widthFix"></image>
					<view v-if="isSelectShow" class="select-box flex-col justify-around align-center">
						<view class="gather-select" :style="{color:item.name==gather?'#FFF':'#FFFFFF99'}"
							v-for="item,index in gatherList" :key="index" @tap="selectGather(index)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="crystal-box"
				:style="{background: 'url('+`/static/images/starmap/crystal-num-bg${isSelectMap}.png`+')  no-repeat center center / 100% 100%',backgroundSize:'100% 100%'}">
				<image class="my-crystal" :src="`/static/images/starmap/crystal_count${isSelectMap}.png`" mode="">
				</image>
				<!-- 已开采的钻石数量 -->
				<view class="my-num">
					{{kuangInfo.harvest}}
				</view>
			</view>
		</view>
		<!-- 第三张地图顶部 -->
		<view class="top-crystal3 justify-between" v-if="isSelectMap==3">
			<view class="crystal-box3 align-center"
				:style="{background: 'url('+`/static/images/starmap/crystal-num-bg${isSelectMap-1}.png`+')  no-repeat center center / 100% 100%',backgroundSize:'100% 100%'}">
				<image class="my-crystal-l-3" :src="`/static/images/starmap/my_crystal${isSelectMap}.png`" mode="">
				</image>
				<view class="my-num3 justify-start align-center">
					{{'暂无地图'}}({{'0'}})
					<image class="xiala" src="/static/images/starmap/xiala.svg" mode="widthFix"></image>
				</view>
			</view>
			<!-- 右边 -->
			<view class="crystal-box-r3 justify-center align-center">
				<image class="my-crystal-r-3" :src="`/static/images/starmap/crystal_count${isSelectMap}.png`" mode="">
				</image>
				<view class="my-num-r3 justify-center align-center" @tap="addMap">
					{{'添加新地图'}}
				</view>
			</view>
		</view>
		<!-- 居中大地图 -->
		<view class="map1-box">
			<image class="map1" :src="`/static/images/starmap/map${isSelectMap}.png`" mode=""></image>
			<!-- 地图提示 没有龙 没放龙== -->
			<!-- '您暂时没有青龙',0
					'您暂未邀请好友',1
					'暂未开启',2
					'暂未放置青龙采集'3 -->
			<!-- 没龙 -->
			<view class="map-tips justify-center" v-if="loading&&isSelectMap==1&&!getIsHasLong">
				{{mapTipList[0]}}
			</view>
			<!-- 有龙有未放置的龙显示 并且采矿的龙==0-->
			<view class="map-tips justify-center"
				v-if="loading&&isSelectMap==1&&getIsHasLong&&kuangInfo.mineing_dragon_num==0">
				{{mapTipList[3]}}
			</view>
			<!-- 有龙 -->
			<!-- 	<view class="map-tips justify-center" v-if="loading&&isSelectMap==1&&getIsHasLong">
				{{mapTipList[3]}}
			</view> -->
			<view class="map-tips justify-center" v-if="loading&&isSelectMap==2">
				{{mapTipList[1]}}
			</view>
			<view class="map-tips justify-center" v-if="loading&&isSelectMap==3">
				{{mapTipList[2]}}
			</view>
			<!-- 放在地图上的龙 有存在的龙采矿才显示-->
			<view class="min-long-box flex-col justify-center align-center" v-if="kuangInfo.mineing_dragon_num!=0">
				<view class="efficiency">
					{{kuangInfo.efficiency}}
					<!-- 采矿频率龙头顶的 -->
				</view>
				<image class="min-long" src="/static/images/starmap/min-long.png" mode="widthFix"></image>

			</view>
		</view>
		<view class="fixed-l">
			<view class="fixed-l-box flex-col justify-between">
				<image @tap="selectMap(1)" class="btn-l"
					:src="`/static/images/starmap/l-${isSelectMap==1?'a':''}btn-map1.png`" mode="widthFix"></image>
				<image @tap="selectMap(2)" class="btn-l"
					:src="`/static/images/starmap/l-${isSelectMap==2?'a':''}btn-map2.png`" mode="widthFix"></image>
				<image @tap="selectMap(3)" class="btn-l"
					:src="`/static/images/starmap/l-${isSelectMap==3?'a':''}btn-map3.png`" mode="widthFix"></image>
			</view>
		</view>
		<view class="fixed-r">
			<view class="fixed-r-box flex-col align-center justify-between">
				<view class="mb30 flex-col align-center" @tap="getCollection(Number(kuangInfo.mineing_dragon_num)>0)">
					<image class="btn-r" src="/static/images/starmap/btn_bg_r1.png" mode="widthFix"></image>
					{{Number(kuangInfo.mineing_dragon_num)>0?'正在采集':'未启动'}}
					<view class="btn-star-num">
						<!-- 正在采集||空闲龙数量 -->
						{{Number(kuangInfo.mineing_dragon_num) || Number(kuangInfo.idle_dragon_num)}}
					</view>
				</view>
				<view class="mb30 flex-col align-center" v-if="isSelectMap!=2">
					<image class="btn-r" src="/static/images/starmap/btn_bg-r2.png" mode="widthFix"></image>
					{{isSelectMap==1?'每日采集':'日总采集'}}
					<view class="btn-star-num">
						{{kuangInfo.day_max}}
					</view>
				</view>
				<!-- 钻石榜按钮 -->
				<image class="mb30 btn-r" src="/static/images/starmap/sjb-r3.png" mode="widthFix"
					@tap="$navto('/pages/star-map/crystalRanking?map='+isSelectMap)"></image>
				<!-- 玩法攻略按钮 -->
				<image class="mb30 btn-r" src="/static/images/starmap/wfgl-r4png.png" mode="widthFix"
					@tap="$navto('/pages/star-map/paly-func?map='+isSelectMap)"></image>
				<!-- 购买潮卡 -->
				<image class="mb30 btn-r" src="/static/images/starmap/chaoka.png" mode="widthFix"
				v-if="loading&&isSelectMap==1&&getIsHasLong&&kuangInfo.idle_dragon_num!=0"
					@tap="calltap"></image>
				<!-- 空闲的青龙 -->
				<view class="mb30 flex-col align-center" v-if="kuangInfo.idle_dragon_num!=0" @tap="putTap">
					<image class="btn-r" src="/static/images/starmap/fang-long.png" mode="widthFix"></image>
					x{{kuangInfo.idle_dragon_num}}
				</view>
			</view>
		</view>
		<!-- 底部黄色按钮 -->
		<!-- buyBtnList: [
					'去购买山海经潮卡',
					'邀请好友组队挖矿',
					'放置青龙采集'
				], -->
		<view class="bottom-btn justify-center align-center" @tap="calltap" v-if="loading&&isSelectMap==2">
			{{buyBtnList[1]}}
			<view class="shadow">
			</view>
		</view>
		<!-- 购买山海经潮卡 -->
		<view class="bottom-btn justify-center align-center" @tap="calltap"
			v-if="loading&&isSelectMap==1&&!getIsHasLong || loading&&isSelectMap==1&&getIsHasLong&&kuangInfo.idle_dragon_num==0">
			{{buyBtnList[0]}}
			<view class="shadow">
			</view>
		</view>
		<view class="bottom-btn justify-center align-center" @tap="putTap"
			v-if="loading&&isSelectMap==1&&getIsHasLong&&kuangInfo.idle_dragon_num!=0">
			{{buyBtnList[2]}}
			<view class="shadow">
			</view>
		</view>
		<!-- 放置龙弹出层-->
		<modal-dragon :data='kuangInfo' :isShow='moneyShow'  @close="moneyShow=false" @update='getIndex'></modal-dragon>
		<modal-sale :data='kuangInfo.goods' :isShow='buyShow'  @close="buyShow=false" @update='getIndex'></modal-sale>
	</view>
</template>

<script>
	import utils from '@/utils/uni-add.js';
	import modalDragon from './modal-dragon.vue'
	import modalSale from './modal-sale.vue'
	import topNavigation from '@/components/top-navigation/top-navigation.vue'
	export default {
		components: {
			// 注册组件
			topNavigation,modalDragon,modalSale
			// mine,
		},
		data() {
			return {
				kuangInfo: {},
				moneyShow: false,
				isSelectShow: false,
				gatherList: [{
						name: '采集一队'
					},
					{
						name: '采集二队'
					},
				],
				mapTipList: [
					'您暂时没有青龙',
					'您暂未邀请好友',
					'暂未开启',
					'暂未放置青龙采集'
				],
				buyBtnList: [
					'去购买山海经潮卡',
					'邀请好友组队挖矿',
					'放置青龙采集'
				],
				gather: '采集一队',
				isSelectMap: 1,
				value: 1,
				buyShow: false, //购买弹窗
				mapBg: '/static/images/starmap/private_map_bg-1.png',
				mapBgList: '/static/images/starmap/private_map_bg-1.png',
				imgSrc: 'url(/static/images/homes/background.png)',
				isHas: false, //没有放置
				loading: false,
			}
		},
		created() {
			this.getIndex()
		},
		computed: {
			getIsHasLong() {
				// 空闲的龙和采集的龙同时为0的时候表示没有龙
				return this.kuangInfo.mineing_dragon_num == 0 && this.kuangInfo.idle_dragon_num == 0 ? false : true
			}
		},
		methods: {
			getCollection(e){
				console.log(e,'e');
				if(e){
					// 正在采集
					this.$navto('/pages/star-map/collection-list')
				}
			},
			async getIndex() {
				let url = '/api/v1/mineing'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					map: this.isSelectMap
				})
				if (code == 200) {
					console.log(data, '静态资源');
					this.loading = true
					this.kuangInfo = data
					// this.imgList = data.list || []
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			// 放置青龙
			putTap() {
				this.moneyShow = true
			},
			// 添加新地图
			addMap() {
				this.$navto('/pages/star-map/addHighMap')
			},
			selectTap() {
				this.isSelectShow = !this.isSelectShow
			},
			selectGather(i) {
				this.gather = this.gatherList[i].name
			},
			buyOpen() {

			},
			buyClose() {
				this.buyShow = false
			},
			calltap() {
				if (this.isSelectMap == 1) {
					this.buyShow = true
				}
			},
			selectMap(e) {
				this.isSelectMap = e
				this.getIndex()
			},
			withdraw() {
				utils.navto('/pages/home/withdraw/index', false, 1)
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		width: 100vw;
		height: calc(100vh);
		overflow: hidden;
		background-size: 100% 100%;

		@keyframes slidein {


			0% {
				transform: translateY(-20%);
				opacity: 1;
			}

			// 30% {
			// 	transform: translateY(-30%);
			// 	opacity: 1;
			// }

			// 70% {
			// 	transform: translateY(-70%);
			// 	opacity: 1;
			// }

			100% {
				transform: translateY(-100%);
				opacity: 0;
			}
		}

		.map1-box {
			margin-top: 80rpx;
			position: relative;

			.min-long-box {
				position: absolute;
				top: 328rpx;
				left: 90rpx;

				.efficiency {
					position: absolute;
					top: -10rpx;
					font-weight: bold;
					font-size: 22rpx;
					color: #FFF;
					animation-duration: 1s;
					animation-name: slidein;
					animation-iteration-count: infinite;
				}
			}

			.min-long {
				margin-top: 10rpx;
				width: 90rpx;
			}

			.map-tips {
				white-space: nowrap;
				background: rgba(28, 31, 38, .8);
				color: rgba(255, 255, 255, .8);
				border-radius: 8rpx;
				padding: 14rpx 30rpx;
				font-size: 12px;
				font-weight: 300;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.map1 {
				width: 400rpx;
				height: 980rpx;
			}
		}
		.top-crystal {

			width: 100%;
			padding: 60rpx 70rpx 0;

			.crystal-box {
				width: 252rpx;
				height: 60rpx;
				position: relative;

				.my-num {
					position: absolute;
					top: 16rpx;
					left: 60rpx;
					font-size: 0.875rem;
					font-weight: 700;
					color: rgb(255, 255, 255);

					.gather-select {
						font-size: 26rpx;
					}

					.xiala {
						margin-left: 10rpx;
						width: 22rpx;
					}

					.select-box {
						padding: 24rpx 0;
						position: absolute;
						border-radius: 8rpx;
						top: 60rpx;
						left: 0;
						width: 4.25rem;
						height: 6.25rem;
						background-color: #36394a;
						z-index: 9;

						&::before {
							content: '';
							position: absolute;
							top: -20rpx;
							right: 30rpx;
							width: 0;
							height: 0;
							border-top: .3125rem solid transparent;
							border-right: .3125rem solid transparent;
							border-left: .3125rem solid transparent;
							border-bottom: .3125rem solid #36394a;
						}
					}
				}
			}

			.my-crystal {
				transform: translate(-40%, 0);
				width: 86rpx;
				height: 86rpx;
			}
		}

		.top-crystal3 {

			width: 100%;
			padding: 80rpx 70rpx 0;

			.crystal-box3 {
				width: 300rpx;
				height: 60rpx;
				position: relative;

				.my-num3 {
					position: absolute;
					top: 16rpx;
					left: 70rpx;
					font-size: 0.875rem;
					color: rgb(255, 255, 255);

					.xiala {
						margin-left: 30rpx;
						width: 22rpx;
					}
				}
			}

			.crystal-box-r3 {
				width: 6.4375rem;
				height: 60rpx;
				color: #9d5200;
				position: relative;
				background-color: #ca8200;
				border-radius: 3.75rem;
				box-shadow: 1px 2px 0 0 #ca8200;

				&::before {
					content: "";
					position: absolute;
					z-index: 1;
					top: -.125rem;
					left: 0;
					width: 100%;
					height: 1.9375rem;
					border-radius: 3.75rem;
					background: linear-gradient(180deg, #fec777 0%, #ffa500 100%);
					box-shadow: inset -0.125rem -0.0625rem 0.0625rem #f5be22, inset 0 0.1875rem 0.1875rem #ffed62;
				}

				.my-num-r3 {

					border-radius: 3.75rem;
					font-size: .75rem;
					font-weight: 700;
					z-index: 1;

					&::before {
						content: "";
						position: absolute;
						z-index: 1;
						top: -.0625rem;
						left: .4375rem;
						width: 6rem;
						height: 1.8125rem;
						border-radius: 3.75rem;
						background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
						box-shadow: 0 0 0.03125rem 0.03125rem rgba(255, 255, 255, .07);
						opacity: .5;
					}

					.xiala {
						margin-left: 30rpx;
						width: 22rpx;
					}
				}
			}

			.my-crystal-l-3 {
				transform: translate(-40%, 0);
				width: 90rpx;
				height: 90rpx;
			}

			.my-crystal-r-3 {
				z-index: 1;
				margin-right: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		// padding:0 30rpx;
		.left-slot {
			text-indent: 1em;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFF;
		}

		.bottom-btn {
			border-radius: 8rpx;
			margin: 40rpx 0 60rpx;
			font-weight: 700;
			font-size: 30rpx;
			position: relative;

			position: fixed;
			bottom: 100rpx;
			width: 16.4375rem;
			height: 2.78125rem;
			color: #be6300;
			line-height: 2.78125rem;
			background: linear-gradient(180deg, #fec777 0%, #ffa500 100%);
		}

		.shadow {
			position: absolute;
			left: 0;
			bottom: -.3125rem;
			width: 100%;
			height: .40625rem;
			background-color: #855500;
			;
			border-radius: 0 0 8px 8px;
			border-top-left-radius: 0px;
			border-top-right-radius: 0px;
			border-bottom-right-radius: 8px;
			border-bottom-left-radius: 8px;
			opacity: 1;
			z-index: 1;
		}

		.fixed-l {

			top: 35vh;
			position: fixed;
			left: 30rpx;

			.fixed-l-box {
				height: 350rpx;
			}
		}

		.fixed-r {

			top: 22vh;
			position: fixed;
			right: 30rpx;

			.fixed-r-box {
				color: #FFF;
				font-size: .625rem;

				.btn-star-num {
					position: absolute;
					top: 45%;
					transform: translate(0, -100%);
					font-size: 0.625rem;
					font-weight: normal;
					color: #23591e;
				}
			}
		}

		.btn-l {
			width: 128rpx;
		}

		.btn-r {
			width: 100rpx;
		}





	}

	.minus {
		width: 22px;
		height: 22px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		// background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>